<template>
  <div>
    <c-title :hide="false" :text="text" />
    <div class="list" v-for="item in list" :key="item.id">
      <div class="item" @click="confirm(item.id)">
        <div class="hongbao">
          <i class="iconfont icon-fontclass-xiaofeihongbao"></i>
        </div>
        <div class="content">
          <span>{{ item.type_name }}</span>
          <span>{{ item.created_at }}</span>
        </div>
      </div>
    </div>
    <van-overlay :show="show">
      <div class="wrapper" @click="show = false">
        <div class="block">
          <div class="draw">
            <span class="draw-icon">￥</span>
            <span class="draw-price"> {{ detail.value }}</span>
          </div>
          <img src="../../../assets/images/success@2x.png" class="success-img" />
          <div class="block-confirm">请点击确定领取{{ detail.type_name }}</div>
          <div class="success-btn" @click="ToAdvertising">确认</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { scrollMixin } from "../../../utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      show: false,
      isLoadMore: true,
      current_page: 1,
      last_page: 1,
      list: [],
      detail: {
        value: "",
        type_name: "",
        ad_link: "",
        id: ""
      },
      text:""
    };
  },
  activated() {
    this.init();
    this.getData();
  },
  methods: {
    init() {
      this.show = false;
      this.detail = {
        value: "",
        type_name: "",
        ad_link: "",
        id: ""
      };
      this.isLoadMore = true;
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.current_page >= this.last_page) {
        return;
      } else {
        let page = this.current_page + 1;
        $http.get("plugin.love-speed-pool.frontend.redpack.index", { page }).then(res => {
          this.isLoadMore = true;
          if (res.result == 1) {
            this.list = this.list.concat(res.data.list.data);
            this.current_page = res.data.list.current_page;
            this.last_page = res.data.list.last_page;
          } else {
            this.$toast(res.msg);
          }
        });
      }
    },
    confirm(id) {
      this.show = true;
      $http.get("plugin.love-speed-pool.frontend.redpack.detail", { lr_id: id }).then(res => {
        if (res.result == 1) {
          let data = res.data.detail;
          this.detail.value = data.value;
          this.detail.type_name = data.type_name;
          this.detail.ad_link = data.ad_link;
          this.detail.id = data.id;
        } else {
          this.$toast(res.msg);
        }
      });
    },
    getData() {
      $http
        .get("plugin.love-speed-pool.frontend.redpack.index")
        .then(res => {
          if (res.result == 1) {
            this.list = res.data.list.data;
            this.current_page = res.data.list.current_page;
            this.last_page = res.data.list.last_page;
            this.text = res.data.diy_names.diy_receive_red_action;
            this.fun.setWXTitle(res.data.diy_names.diy_receive_red_action)
          } else {
            this.$toast(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //领取释放爱心值
    ToAdvertising() {
      $http.get("plugin.love-speed-pool.frontend.redpack.receive", { lr_id: this.detail.id }, "加载中").then(res => {
        if (res.result == 1) {
          this.getData()
          this.$toast(res.msg);
          if(this.detail.ad_link){
           window.location.href = this.detail.ad_link;
          }
          this.getData()
        } else {
          this.$toast(res.msg);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.hongbao {
  width: 3.285rem;
  height: 3.071rem;
  line-height: 3.071rem;
  border-radius: 100px;
  background-color: rgba(155, 17, 17, 100);
  text-align: center;
  margin: 0 0.64rem 0 2rem;

  ::v-deep .iconfont {
    display: inline-block;
    color: #ffe982;
    font-size: 1.7rem;
    margin-left: 0.7rem;
    margin-top: 0.2rem;
  }
}

.block {
  position: relative;
  width: 20rem;
  margin: 0 2rem;

  .success-img {
    width: 100%;
  }

  .success-btn {
    width: 9rem;
    height: 2rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 75%;
    margin: 0 auto;
    text-align: center;
    line-height: 2rem;
    background: linear-gradient(#ffe71f, #ffe71f);
    box-shadow: 0 0.3rem 0 0 rgba(255, 148, 8, 0.8);
    border-radius: 1rem;
    color: #ff4e00;
  }

  &-confirm {
    position: absolute;
    top: 59%;
    right: 0;
    left: 0;
    text-align: center;
    color: #fff;
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.list {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;

  .item {
    display: flex;
    align-items: center;
    height: 89px;
    background-color: #f65958;
    color: #e9e9e9;
    border-radius: 5px;
  }

  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    padding-top: 1.2rem;
    padding-bottom: 1.3rem;
  }
}

.draw {
  color: #f41100;
  position: absolute;
  left: 0;
  right: 0;
  top: 19%;
  display: flex;
  align-items: flex-end;
  justify-content: center;

  &-price {
    font-size: 2rem;
  }

  &-icon {
    position: relative;
    bottom: 4px;
  }
}
</style>
